<template>
  <div :class="{
    'theme-default': type === 'default',
    'theme-orange': type === 'orange'
  }">
    <Input v-bind="$attrs" v-on="$listeners" :style="{ width: width || '250px' }">
      <template slot="prepend">
        <img v-if="type === 'default'" src="~/assets/images/graysearch.png" alt="" class="icon">
        <img v-else-if="type === 'orange'" src="~/assets/images/lightsearch.png" alt="">
      </template>
      <div slot="append" @click="handleClick">
        搜索
      </div>
    </Input>
  </div>
</template>

<script>
import { Input } from 'element-ui'

export default {
  name: 'MSearchbar',
  components: { Input },
  props: {
    type: {
      type: String,
      default: 'default'
    },
    width: String
  },
  methods: {
    handleClick() {
      this.$emit('click-search')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
.icon{
  position: relative;
  top: 2px;
}
.theme-default {
  /deep/ .el-input__inner:focus {
    border-color: #DCDFE6;
  }

  /deep/ .el-input-group__prepend {
    padding: 0 10px;
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
    background-color: #fff;
    border-color: #666;
  }

  /deep/ .el-input-group__append {
    padding: 0 20px;
    border-top-right-radius: 45px;
    border-bottom-right-radius: 45px;
    background-color: $theme-color-1;
    color: #fff;
    border: none;
    cursor: pointer;
    border-color: #666;
  }

  /deep/ .el-input__inner {
    border-left: none;
    border-right: none;
    border-color: #666 !important;
    padding: 0 5px;
  }
}

.theme-orange {
  /deep/ .el-input__inner:focus {
    border-color: #DCDFE6;
  }

  /deep/ .el-input-group__prepend {
    padding: 0 5px 0 10px;
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
    background-color: $theme-color-1;
    border-color: #fff;
  }

  /deep/ .el-input-group__append {
    padding: 0 20px;
    border-top-right-radius: 45px;
    border-bottom-right-radius: 45px;
    background-color: #fff;
    color: $theme-color-1;
    border: none;
    cursor: pointer;
  }

  /deep/ .el-input__inner {
    border-left: none;
    border-right: none;
    // border-color: #666 !important;
    border: none;
    background-color: $theme-color-1;
    color: #fff;
    padding: 0 5px;

    &::placeholder {
      color: #fff;
    }
  }

}
</style>
